<template>
  <div>
    <!-- 图片上传组件 -->
    <el-upload
      :action="uploadImgUrl"
      :before-upload="handleBeforeUpload"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      name="file"
      :show-file-list="false"
      :headers="headers"
      style="display: none"
      ref="upload"
      accept=".jpg,.jpeg,.png,.gif"
    >
    </el-upload>
    
    <!-- 工具栏 -->
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    
    <!-- 编辑器 -->
    <Editor
      :style="`height: ${height}px; overflow-y: auto; border: 1px solid #ccc; border-top: none;`"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>

<script setup name="WangEditor">
import '@wangeditor/editor/dist/css/style.css'
import './editor-scroll.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { Boot } from '@wangeditor/editor'
import attachmentModule from '@wangeditor/plugin-upload-attachment'
import { getToken } from "@/utils/auth"
import { ref, reactive, watch, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue'



// 组件名称
defineOptions({
  name: 'WangEditor'
})

// Props定义
const props = defineProps({
  /* 编辑器的内容 */
  modelValue: {
    type: String,
    default: "",
  },
  /* 高度 */
  height: {
    type: Number,
    default: 300,
  },
  /* 只读 */
  readOnly: {
    type: Boolean,
    default: false,
  },
  /* 上传文件大小限制(MB) */
  fileSize: {
    type: Number,
    default: 5,
  },
  /* 模式 */
  mode: {
    type: String,
    default: 'default', // 或 'simple'
  }
})

// Emits定义
const emit = defineEmits(['update:modelValue', 'change', 'created'])

// 响应式数据
const editorRef = ref()
const valueHtml = ref('')
const { proxy } = getCurrentInstance()

// 上传配置
const uploadImgUrl = import.meta.env.VITE_APP_BASE_API + "/common/upload"
console.log('=== 上传配置信息 ===')
console.log('上传URL:', uploadImgUrl)
console.log('BASE_API:', import.meta.env.VITE_APP_BASE_API)
console.log('Token:', getToken())

const headers = {
  Authorization: "Bearer " + getToken()
}
console.log('请求头:', headers)

// 工具栏配置
const toolbarConfig = {
  toolbarKeys: [
    // 菜单 key
    'headerSelect',
    // 分割线
    '|',
    // 菜单 key
    'bold',
    'italic',
    'underline',
    'through',
    'code',
    'sup',
    'sub',
    'clearStyle',
    'color',
    'bgColor',
    '|',
    'fontSize',
    'fontFamily',
    'lineHeight',
    '|',
    'bulletedList',
    'numberedList',
    'todo',
    {
      key: 'group-justify',
      title: '对齐',
      iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z"></path></svg>',
      menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify']
    },
    {
      key: 'group-indent',
      title: '缩进',
      iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>',
      menuKeys: ['indent', 'delIndent']
    },
    '|',
    'emotion',
    'insertLink',
    {
      key: 'group-image',
      title: '图片',
      iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M959.877 128c0.040 0.034 0.082 0.076 0.123 0.111V896H64V128h895.877zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192V832z"></path></svg>',
      menuKeys: ['insertImage', 'uploadImage']
    },
    '|',
    'insertTable',
    'codeBlock',
    'divider',
    '|',
    'undo',
    'redo',
    '|',
    'fullScreen'
  ]
}

// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  readOnly: props.readOnly,
  // 防止Slate DOM解析错误
  autoFocus: false,
  scroll: true, // 启用滚动
  height: 350, // 设置编辑器最小高度，避免警告
  MENU_CONF: {
    // 配置上传图片
    uploadImage: {
      server: uploadImgUrl,
      fieldName: 'file',
      headers: headers,
      maxFileSize: props.fileSize * 1024 * 1024, // 根据props设置文件大小
      allowedFileTypes: ['image/*'],
      timeout: 30 * 1000, // 设置30秒超时
      
      // 上传前的钩子
      onBeforeUpload(file) {
        console.log('准备上传图片，完整文件对象:', file)
        console.log('文件对象类型:', typeof file)
        console.log('文件对象键值:', Object.keys(file))
        
        // 检查file对象是否有效
        if (!file || typeof file !== 'object') {
          console.error('无效的文件对象:', file)
          proxy.$modal.msgError('无效的文件对象')
          return false
        }
        
        // WangEditor可能传入的是包装后的文件对象，需要获取实际的File对象
        let actualFile = file
        
        // 检查是否是包装对象，尝试获取实际的文件
        if (file.data && file.data instanceof File) {
          actualFile = file.data
          console.log('检测到包装文件对象，使用data属性:', actualFile)
        } else if (file.file && file.file instanceof File) {
          actualFile = file.file
          console.log('检测到包装文件对象，使用file属性:', actualFile)
        } else if (file instanceof File) {
          actualFile = file
          console.log('检测到原生File对象:', actualFile)
        } else {
          // 如果都不是，尝试从对象的第一个属性中获取File对象
          const keys = Object.keys(file)
          if (keys.length > 0) {
            const firstKey = keys[0]
            const firstValue = file[firstKey]
            if (firstValue && typeof firstValue === 'object' && firstValue.name && firstValue.size !== undefined) {
              actualFile = firstValue
              console.log('从第一个属性获取文件对象:', firstKey, actualFile)
            }
          }
        }
        
        // 检查实际文件对象
        if (!actualFile || (!actualFile.name && !actualFile.fileName)) {
          console.error('无法获取有效的文件对象:', actualFile)
          proxy.$modal.msgError('无法获取有效的文件信息')
          return false
        }
        
        // 获取文件名
        const fileName = actualFile.name || actualFile.fileName || '未知文件'
        
        // 检查文件大小
        const fileSize = actualFile.size || 0
        if (typeof fileSize !== 'number' || isNaN(fileSize)) {
          console.error('文件大小无效:', fileSize)
          proxy.$modal.msgError('文件大小无效')
          return false
        }
        
        console.log('文件信息:', fileName, '大小:', (fileSize / 1024 / 1024).toFixed(2) + 'MB', '类型:', actualFile.type)
        
        // 检查文件大小限制
        if (fileSize > props.fileSize * 1024 * 1024) {
          proxy.$modal.msgError(`图片大小不能超过 ${props.fileSize}MB`)
          return false
        }
        
        // 检查文件类型
        const fileType = actualFile.type || ''
        if (!fileType || !fileType.startsWith('image/')) {
          proxy.$modal.msgError('只能上传图片文件')
          return false
        }
        
        return true
      },
      
      // 上传进度
      onProgress(progress) {
        console.log('上传进度:', Math.round(progress * 100) + '%')
      },
      
      // 自定义插入图片 - 简化处理逻辑
      customInsert(res, insertFn) {
        console.log('图片上传响应:', res)
        
        try {
          if (res.code === 200 || res.code === 0) {
            // 获取图片URL
            let imageUrl = res.fileName || res.url || res.data || res.path
            
            if (!imageUrl) {
              console.error('无法从响应中获取图片URL:', res)
              proxy.$modal.msgError('图片上传失败：无法获取图片地址')
              return
            }
            
            // 确保URL格式正确
            if (!imageUrl.startsWith('http')) {
              if (!imageUrl.startsWith('/')) {
                imageUrl = '/' + imageUrl
              }
              imageUrl = import.meta.env.VITE_APP_BASE_API + imageUrl
            }
            
            console.log('插入图片URL:', imageUrl)
            
            // 检查编辑器状态
            if (!editorRef.value || editorRef.value.isDestroyed) {
              console.error('编辑器状态异常，无法插入图片')
              proxy.$modal.msgError('编辑器状态异常，请刷新页面重试')
              return
            }
            
            // 插入图片
            insertFn(imageUrl, '', '')
            proxy.$modal.msgSuccess('图片上传成功')
            
          } else {
            console.error('图片上传失败:', res)
            const errorMsg = res.msg || res.message || '图片上传失败'
            proxy.$modal.msgError(errorMsg)
          }
        } catch (error) {
          console.error('处理图片上传结果时出错:', error)
          proxy.$modal.msgError('图片插入失败，请重试')
        }
      },
      
      // 上传失败
      onFailed(file, res) {
        console.error('图片上传失败:', file.name, res)
        const errorMsg = res?.msg || res?.message || '图片上传失败'
        proxy.$modal.msgError(errorMsg)
      },
      
      // 上传错误
      onError(file, err, res) {
        console.error('图片上传错误:', file.name, err, res)
        let errorMsg = '图片上传出现错误'
        
        if (err?.message) {
          if (err.message.includes('timeout')) {
            errorMsg = '图片上传超时，请检查网络连接'
          } else if (err.message.includes('Network Error')) {
            errorMsg = '网络连接异常，请检查网络'
          } else {
            errorMsg = err.message
          }
        }
        
        proxy.$modal.msgError(errorMsg)
      }
    }
  }
}

// 监听 modelValue 变化
watch(() => props.modelValue, (newVal) => {
  if (newVal !== valueHtml.value) {
    valueHtml.value = newVal || ''
  }
}, { immediate: true })

// 监听编辑器内容变化
watch(valueHtml, (newVal) => {
  emit('update:modelValue', newVal)
})

// 编辑器创建完毕时的回调函数
const handleCreated = (editor) => {
  console.log('编辑器创建完成')
  editorRef.value = editor // 记录 editor 实例，重要！
  emit('created', editor)
}

// 编辑器内容改变时的回调函数
const handleChange = (editor) => {
  // 编辑器内容变化时触发
  emit('change', editor)
}

// 图片上传前的钩子
const handleBeforeUpload = (file) => {
  // 校验文件大小
  if (props.fileSize) {
    const isLt = file.size / 1024 / 1024 < props.fileSize
    if (!isLt) {
      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`)
      return false
    }
  }
  // 校验文件类型
  if (file.type.indexOf("image/") == -1) {
    proxy.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
    return false
  }
  return true
}

// 图片上传成功的钩子
const handleUploadSuccess = (res, file) => {
  if (res.code == 200) {
    proxy.$modal.msgSuccess("图片上传成功")
  } else {
    proxy.$modal.msgError("图片上传失败")
  }
}

// 图片上传失败的钩子
const handleUploadError = () => {
  proxy.$modal.msgError("图片上传失败")
}

// 获取编辑器HTML内容
const getHtml = () => {
  return editorRef.value?.getHtml() || ''
}

// 获取编辑器文本内容
const getText = () => {
  return editorRef.value?.getText() || ''
}

// 设置编辑器HTML内容
const setHtml = (html) => {
  editorRef.value?.setHtml(html || '')
}

// 清空编辑器内容
const clear = () => {
  editorRef.value?.clear()
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  if (editorRef.value) {
    editorRef.value.destroy()
    editorRef.value = null
  }
})

// 暴露方法给父组件
defineExpose({
  getHtml,
  getText,
  setHtml,
  clear
})
</script>

<style scoped>
/* 编辑器样式可以在这里自定义 */
</style>